<template>
  <div class="container">
    <div class="content">
      <h1>Myapp</h1>
      <div class="all">
        <div class="left">
          <div>今天是2021年10月9日</div>
          <h2>17:30</h2>
          <div>您工作辛苦了</div>
        </div>
        <div class="right">
          <div class="buttonBlock">
            <el-button size="mini" @click="register">注册</el-button>
            <el-button size="mini" @click="login">登录</el-button>
          </div>
<!--          <div v-if="isLogin===0">-->
<!--            <el-input size="medium" placeholder="请输入注册手机号" v-model="formData.username" @keyup.enter="handleLogin"></el-input>-->
<!--            <el-input size="medium" placeholder="请输入绑定邮箱" v-model="formData.email" @keyup.enter="handleLogin"></el-input>-->
<!--            <el-input size="medium" placeholder="请输入密码" v-model="formData.password" @keyup.enter="handleLogin">-->
<!--            </el-input>-->
<!--          </div>-->
          <div>
            <el-form label-width="80px" :model="formData" :rules="rules.loginFormCheck">
              <el-form-item label="用户名" prop="loginUsername" >
                <el-input size="small" placeholder="请输入账号/手机号" v-model="formData.loginUsername" @keyup.enter="handleLogin"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="loginPassword">
                <el-input size="small" placeholder="请输入密码" v-model="formData.loginPassword" @keyup.enter="handleLogin"></el-input>
              </el-form-item>
            </el-form>

              <!--            <template #append>-->
              <!--              <el-button type="primary"-->
              <!--                         style="color:#fff;border-radius: 0 4px 4px 0;background-color: #00a0e0!important;"-->
              <!--                         @click="handleSendMessage">发送验证码-->
              <!--              </el-button>-->
              <!--            </template>-->
          </div>

          <el-button size="medium" type="primary" round @click="handleLogin"
          style="margin-top: 10px">
            登录
          </el-button>
<!--          <el-button v-if="isLogin===0" size="medium" type="primary" round @click="handleLogin"-->
<!--                     style="margin-top: 10px">-->
<!--            注册-->
<!--          </el-button>-->
        </div>
      </div>
    </div>
  </div>

  <el-dialog title="注册信息" v-model="dialogFlag">
    <el-form label-width="80px" style="padding-right: 20px" :model="formData" :rules="rules.loginFormCheck">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input size="small" v-model="formData.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码"  prop="password">
            <el-input size="small" v-model="formData.password"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号"  prop="phone">
            <el-input size="small" v-model="formData.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学校" prop="school">
            <el-input size="small" v-model="formData.school"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业年份"  prop="graduationYear">
            <el-input size="small" v-model="formData.graduationYear"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="position">
            <el-input size="small" v-model="formData.position"></el-input>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">-->
<!--          <el-form-item label="邮箱"  prop="email">-->
<!--            <el-input size="small" v-model="formData.email"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="性别">-->
<!--            <el-input size="small" v-model="formData.gender"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="当前状态" >-->
<!--            <el-input size="small" v-model="formData.status"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="个性签名">-->
<!--            <el-input size="small" v-model="formData.motto"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="学历" >-->
<!--            <el-input size="small" v-model="formData.education"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="爱好" >-->
<!--            <el-input size="small" v-model="formData.hobby"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="自我介绍">-->
<!--            <el-input size="small" v-model="formData.intros"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="居住地">-->
<!--            <el-input size="small" v-model="formData.residence"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <div style="margin-top: 20px" class="buttons">
      <el-button
          icon="el-icon-check"
          type="primary"
          size="mini"
          @click="handleRegister"
      >注册</el-button>
      <el-button
          icon="el-icon-close"
          type="info"
          size="mini"
          @click="dialogFlag=false"
      >关闭
      </el-button>
    </div>
  </el-dialog>

</template>

<script>
import {defineComponent, getCurrentInstance} from 'vue';
import rules from "./check";
import Cookies from 'js-cookie'
import {LoginService} from "@/views/login/service";

export default defineComponent( {
name: "Login",
  data(){
  return{
    rules: rules,
    formData: {},
    isLogin: 1,
    dialogFlag: false,
  }
  },
  components: {
  },
  //此段代码用于home页面获取用户数据
  // setup () {
  //   const { proxy } = getCurrentInstance();
  //   const queryJson = proxy.$root.$route.query;
  //   let type = ref('');
  //   if (queryJson.type) {
  //     type.value = queryJson.type;
  //   }
  //   return {
  //     type
  //   };
  // },
  methods:{
    register(){
      this.dialogFlag = true
    },
    login(){

    },
    async handleLogin(){
      if(!this.formData.loginUsername){
        this.$message.error('请输入用户名')
        return
      }
      if(!this.formData.loginPassword){
        this.$message.error('请输入密码')
        return
      }
      // const loginModel = {
      //   password: this.formData.loginPassword,
      //   username: this.formData.loginUsername
      // }
      let loginModel = new FormData();
      loginModel.append('password',this.formData.loginPassword);
      loginModel.append('username',this.formData.loginUsername);

      // console.log(loginModel)
      let token = await LoginService.login(loginModel)
      console.log(token)
      // token && Cookies.set('MicroCarLoan_Authorization',token)
      this.$message.success('登录成功')
      // this.$router.push({name:'informationManagement_provinceDataSources'})
      this.$router.push({name:'home',query:{username:this.formData.loginUsername}})
    },
    async handleRegister(){
      const registerModel = {
        graduationYear: this.formData.graduationYear,
        password: this.formData.password,
        phone: this.formData.phone,
        position: this.formData.position,
        school: this.formData.school,
        username: this.formData.username
      }
      console.log(registerModel)
     let res = await LoginService.register(registerModel)
    },

  },
})
</script>

<style scoped>
  .container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
   .content{
     width: 40%;
     height: 50%;
     background-color: #ffffff;
     margin: auto;
     margin-top: 10%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
  .content h1{
    /*margin-bottom: 10px;*/
  }
   .content .all{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .content .all .left{
     width: 25%;
     color: #000;
     margin-right: 20px;
   }
   .content .all .right{
     width: 35%;
     /*background-color: #c0c4cc;*/
     border-radius: 0.25rem;
     padding: 1rem;
     text-align: center;
     display: flex;
     flex-direction: column;
     padding-top: 1.4rem;
   }
   .right div .el-form .el-form-item{
     /*width: auto;*/
     margin-bottom: 10px;
     padding: 0 5px;
     overflow: hidden;
     text-align: center;
   }
   .right .buttonBlock{
     display: flex;
     justify-content: center;
     margin-bottom: 10px;
   }
</style>